<template>
  <a-modal
    :visible="visible"
    title="导师信息"
    okText='保存'
    :width="700"
    @cancel="() => { $emit('close') }"
    :confirmLoading="confirmLoading"
    @ok="handleSave"
  >
    <a-select style="width:200px"
              :notFoundContent="deds.fetching ? undefined : null"
              :filterOption="false" allowClear placeholder="可输入导师编号或姓名搜索"
              v-model="selectedIndex"
              @search="handleSearch"
              showSearch>
      <a-spin v-if="deds.fetching" slot="notFoundContent" size="small"/>
      <a-select-option v-for="(i,index) in deds.optionTeacherList" :key="i.id" :value="index">{{ i.gh }}-{{ i.xm }}</a-select-option>
    </a-select>
    <a-button @click="add" type="primary">添加</a-button>
    <a-table
      :columns="columns"
      :dataSource="tearcherList"
      size="middle"
      :pagination="false"
      :scroll="{ y: 240 }"
    >
      <template slot="operation" slot-scope="text, record, index">
        <a-popconfirm title="是否要删除此行？" @confirm="remove(index)">
          <a>删除</a>
        </a-popconfirm>
      </template>
    </a-table>
  </a-modal>
</template>

<script>
import { debounce } from 'utils/common'

export default {
  props: ['visible', 'researchInfo'],
  data () {
    return {
      optionTeacherList: [],
      tearcherList: [],
      selectedIndex: undefined,
      deds : {
        fetching: false,
        optionTeacherList: []
      },
      columns: [
        {
          title: '导师编号',
          width: 100,
          dataIndex: 'dsbh'
        },
        {
          title: '导师姓名',
          width: 350,
          dataIndex: 'dsmc'
        },
        {
          title: '导师类别',
          width: 100,
          dataIndex: 'dslbmc'
        },
        {
          title: '操作',
          width: 100,
          scopedSlots: { customRender: 'operation' }
        }
      ],
      confirmLoading: false
    }
  },
  watch: {
    visible (val) {
      if (val && this.researchInfo.id) {
        this.selectedIndex = undefined
        this.$api.teacher.teacherListByResearch({yjfxId: this.researchInfo.id, zsnd: this.researchInfo.zsxn}).then(res => {
          this.tearcherList = res.data
        })
        this.$api.teacher.teacherListByDwh({dwh: this.researchInfo.ssyxm, zsnd: this.researchInfo.zsxn, zycc: this.researchInfo.xwccm}).then(res => {
          this.deds.optionTeacherList = res.data
        })
        // this.$api.teacher.teacherListByDwh({dwh: val.ssyxm}).then(res => {
        //   this.optionTeacherList = res.data
        // })
      }
    }
  },
  methods: {
    handleSearch: debounce(function (e){
      // if(e && e.length > 0) {
        this.deds.fetching = true
        this.$api.teacher.teacherListByDwh({dwh: this.researchInfo.ssyxm, zsnd: this.researchInfo.zsxn, cx: e, zycc: this.researchInfo.xwccm}).then(res => {
          this.deds.optionTeacherList = res.data
          this.deds.fetching = false
        })
        // return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      // }
    }),
    remove (index) {
      this.tearcherList.splice(index, 1)
    },
    add () {
      let index = this.tearcherList.findIndex( t => {
        return t.dsbh == this.deds.optionTeacherList[this.selectedIndex].gh
      })
      if (index === -1) {
        this.tearcherList.push({
          dsbh: this.deds.optionTeacherList[this.selectedIndex].gh,
          dsmc: this.deds.optionTeacherList[this.selectedIndex].xm,
          dslbmc: this.deds.optionTeacherList[this.selectedIndex].dslbmc
        })
      }
    },
    handleSave () {
      this.confirmLoading = true
      let params = {
        yjfxId: this.researchInfo.id,
        zsnd: this.researchInfo.zsxn,
        dsbh: this.tearcherList.map(item => {
          return item.dsbh
        }).join(',')
      }
      this.$api.teacher.modifyDsYjfxByYjfx(params).then(() => {
        this.$message.success('修改成功')
        this.$emit('close')
        this.$emit('refresh')
      }).finally(() => {
        this.confirmLoading = false
      })
    }
  }
}
</script>

<style>

</style>
